PhotoshopをWebオーサリングツールに変える「psd2css」
フォトショ画像が1クリックでCSS＋HTMLに！
2009年03月23日 08時00分更新
Web制作の画像素材作成にも活躍するPhotoshop。ロゴやアイコンといったパーツのデザインに限って使う人から、デザインカンプの制作～スライスまでこれ1本でこなす人まで……と、その活用法は人それぞれ。だが、Photoshopを簡易Webオーサリングツールとして使う方法があることをご存じだろうか？ それを実現するのが、「psd2css」というユニークなオンラインサービスだ。
 |
|---|
| psd2cssのトップページ。「Dynamic Web Pages from your Photoshop Designs in Seconds」と魅力的なキャッチコピーが記載されているが…… |
PSDファイルをCSSレイアウトのWebページに変換する
psd2cssは、その名のとおり、PhotoshopのPSDファイルをブラウザーからアップするだけで、CSS／XHTMLファイルに自動変換してくれるサービスだ。……と、さらっと書いてはみたが、よく考えるとこれはスゴい。Photoshopにある「Web用に保存」機能を使えば、Web用に最適化されたJPEGやPNG画像と一緒にHTMLを書き出すことはできるものの、スライス作業は不可欠だし、作られたHTMLも複雑なテーブルレイアウトで構成されていたりして、残念ながら大幅に手を入れないと使えないことが多い。
ところがこのpsd2cssなら、Photoshopで作ったWebページのデザインカンプを、わざわざスライスしなくても、フルCSSレイアウトのWebページにしてくれるという。しかも、変換後のXHTML（XHTML 1.0 Transitional）は、W3C（World Wide Web Consortium）のバリデーターをパスできる、とも説明されている。この説明どおりだとすると、これはかなり画期的なサービスのはず。というわけで、さっそく実際の使い勝手はどうか、試してみた。
まるで使えない？ PSDなら何でもいいわけではなかった！
 |
|---|
| トップページにある「Upload your PSD」からさっそく画像をアップしてみる |
psd2cssの基本機能は現在のところ、無料で利用できる（ユーザー登録も不要）。有料プランの「Unlimited」（月額19.95ドル＝約2000円）を契約すれば、「Drupal」や「Joomla」といった米国で人気のCMSのテーマファイル（テンプレート）へ変換したり、JavaScriptを使ったリッチな画像ギャラリーも作れるとのことだが、まずはシンプルな無料版を利用してみた。
無料版は、psd2cssのトップページから、「参照」ボタンを押してPSDファイルをアップロードするだけで使える。ところが、手っ取り早く変換精度をチェックしようと、手元にあったPSD形式のデザインテンプレートをアップしてみたら、結果はボロボロ。レイアウトは崩れた状態で、画像の分割もまったくうまくいかなかった。
 |  | |
|---|---|---|
| 変換失敗例。左のPSDファイル を「psd2css」にアップして変換した結果が右の画面。かなりショックな変換結果だ | ||
それもそのはず、psd2cssが変換できるのはどんなPSDファイルでもいいわけではなく、ちゃんと条件があったのだ（まぁ当たり前なのだが）。気を取り直して、チュートリアルとドキュメントをちゃんと読んでみると、psd2cssの変換のカラクリにもつながっている、PSDファイル作成にあたっての“ルール”が分かった。
